<!--  -->
<template>
  <div class="container flex-column ">
    <el-tabs v-model="activeTab" :before-leave="handleChangeActive">
      <el-tab-pane
        v-for="item in tabsArr"
        :key="item.id"
        :label="item.name"
        :name="item.key"
      ></el-tab-pane>
    </el-tabs>

    <div class="btn-container flex-row justify-between align-center ">
      <!-- 添加按钮 -->

      <div class="flex-row align-center">
        <custom-button title="新建档案" class="custom-btn" @click="handleAdd" />
        <custom-button title="删除" class="custom-btn mg-left-10" @click="handleDelete" />
      </div>

      <el-input
        v-model="keyword"
        class="input-width"
        placeholder="请输入关键字搜索"
        @input="handleSearch"
      >
        <div slot="suffix" class="el-icon-search search-button" @click="handleSearch"></div>
      </el-input>
    </div>

    <div class="flex-sub " v-if="activeTab === tabsEmun.INTERNAL_MEMBER">
      <park-list ref="parkList" :keyword="keyword" :identityEnum="activeTab" @edit="handleEdit" />
    </div>

    <div class="flex-sub" v-if="activeTab === tabsEmun.VISITOR">
      <visitor-list
        ref="visitorList"
        :keyword="keyword"
        :identityEnum="activeTab"
        @edit="handleEdit"
      />
    </div>

    <edit-dialog
      :isShow="isShowEdit"
      @close="isShowEdit = false"
      :initData="editData"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import VisitorList from './components/visitor-list.vue'
import ParkList from './components/park-list'
import EditDialog from './components/edit-dialog.vue'
import { apiEditCarInfo, apiAddCarInfo } from './api'

const IDENTITY_ENUM = {
  INTERNAL_MEMBER: 'INTERNAL_MEMBER',
  VISITOR: 'VISITOR',
}

export default {
  components: { ParkList, VisitorList, EditDialog },

  data() {
    return {
      keyword: '',
      activeTab: '',
      isShowEdit: false,
      oldKeyword: '',
      editData: {},
    }
  },
  created() {
    this.activeTab = IDENTITY_ENUM.INTERNAL_MEMBER
  },

  computed: {
    tabsArr() {
      return [
        { id: 0, name: '园区车辆', key: IDENTITY_ENUM.INTERNAL_MEMBER },
        { id: 1, name: '访客车辆', key: IDENTITY_ENUM.VISITOR },
      ]
    },
    tabsEmun() {
      return IDENTITY_ENUM
    },
  },

  methods: {
    handleSearch() {
      switch (this.activeTab) {
        case IDENTITY_ENUM.INTERNAL_MEMBER:
          this.$refs.parkList && this.$refs.parkList.getTableData()
          break
        case IDENTITY_ENUM.VISITOR:
          this.$refs.visitorList && this.$refs.visitorList.getTableData()
          break
      }
    },

    handleAdd() {
      this.editData = { identityEnum: this.activeTab }
      this.isShowEdit = true
    },
    handleCompleteOperation() {
      switch (this.activeTab) {
        case IDENTITY_ENUM.INTERNAL_MEMBER:
          this.$refs.parkList.getTableData()
          break
        case IDENTITY_ENUM.VISITOR:
          this.$refs.visitorList.getTableData()
          break
      }

      this.isShowEdit = false
    },
    handleDelete() {
      let handleFunc = null
      switch (this.activeTab) {
        case IDENTITY_ENUM.INTERNAL_MEMBER:
          if (!this.$refs.parkList.selectList.length) {
            return this.$message.error('请选择要删除的数据！')
          }
          handleFunc = () => {
            this.$refs.parkList.multipleDelete()
          }
          break
        case IDENTITY_ENUM.VISITOR:
          if (!this.$refs.visitorList.selectList.length) {
            return this.$message.error('请选择要删除的数据！')
          }

          handleFunc = () => {
            this.$refs.visitorList.multipleDelete()
          }
          break
      }

      this.$confirm('您确定要批量删除记录吗？', '提示').then(() => {
        handleFunc()
      })
    },
    handleChangeActive() {
      const temp = this.oldKeyword
      this.oldKeyword = this.keyword
      this.keyword = temp
    },
    handleEdit(item) {
      this.editData = item
      this.isShowEdit = true
    },
    async handleSubmit(form) {
      try {
        form.id ? await apiEditCarInfo(form) : await apiAddCarInfo(form)
        this.$message.success('提交成功！')
        this.handleCompleteOperation()
      } catch (error) {
        console.log(`apiEditCarInfo error : ${error}`)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  // padding: 20px;
  padding: vw(20px);
  background: #fff;
  box-sizing: border-box;
}

.query-container {
  height: vh(70px);
  padding: 0 vw(20px);
  overflow: hidden;
  box-sizing: border-box;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.line {
  width: 100%;
  height: vh(10px);
  background: #f3f4f8;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.table-container {
  padding: vw(20px);
}

// ::v-deep .el-tabs__nav .is-top {
//   // margin-left: vw(30px);
// }

::v-deep .el-tabs__active-bar {
  height: 3px;
  background: #d12d1f;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
}

::v-deep .el-table__row {
  color: #999;
}

.tab {
  padding: 0 vw(20px);
  margin-top: vh(10px);
}

// .custom-btn {
//   // margin-left: vw(20px);
// }

::v-deep .el-tabs__header {
  margin: 0;
}

.btn-container {
  padding-top: vw(20px);
  padding-bottom: vw(20px);
}

.input-width {
  width: vw(350px);
  // height: vh(50px);
}

.search-button {
  height: 100%;
  padding-top: vh(8px);
  padding-right: vw(6px);
  line-height: 100%;
  cursor: pointer;
}

.table-data-container {
  width: 100%;
  height: 100%;
  padding: 0 vw(20px);
}
</style>
